<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <head>
        <title>Events</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link href="css/doc.min.css" rel="stylesheet" type="text/css"/>  
        <link href="css/plugins/dataTables.bootstrap.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <ui:composition template="com.template/AdminTemplate.xhtml">
            <ui:define name="page-content">  
                <h:form>
                    <div class="row">
                        <ol class="breadcrumb" style="background-color: #fff;">                        
                            <li><a href="index.xhtml">Blue Pumpkin</a></li>                        
                            <li class="active">Events</li>
                        </ol>
                    </div>
                    <div class="row" style="margin-top: -30px;">
                        <!-- Nav tabs -->
                        <ul class="nav nav-pills">
                            <div class="col-sm-3">
                                <li>
                                    <div class="bs-callout bs-callout-info">
                                        <h4><i class="fa fa-book fa-fw"></i><a href="#home-pills" data-toggle="tab">Event</a></h4>
                                        <p>write something here...</p>
                                    </div>                                
                                </li>
                            </div>
                            <div class="col-sm-3">
                                <li>
                                    <div class="bs-callout bs-callout-warning">
                                        <h4><i class="fa fa-comments fa-fw"></i><a href="#profile-pills" data-toggle="tab" style="color: #f0ad4e;">Comment</a></h4>
                                        <p>write something here...</p>
                                    </div>                                
                                </li>
                            </div>
                            <div class="col-sm-3">
                                <li>
                                    <div class="bs-callout bs-callout-danger">
                                        <h4><i class="fa fa-plus-square fa-fw"></i><a href="eventpu.xhtml" style="color: #d9534f;">Create New Event</a></h4>
                                        <p>write something here...</p>
                                    </div>                                
                                </li>
                            </div>
                            <div class="col-sm-3">
                                <li>
                                    <div class="bs-callout">
                                        <h4><i class="fa fa-cogs fa-fw"></i><a href="#settings-pills" data-toggle="tab" style="color: #005f8d;">Settings</a></h4>
                                        <p>write something here...</p>
                                    </div>                                
                                </li>
                            </div>
                        </ul>
                    </div>                
                    <div class="row"> 
                        <!-- Tab panes -->
                        <div class="tab-content">                        
                            <div class="tab-pane fade in active" id="home-pills">
                                <div class="row">
                                    <div class="container-fluid">
                                        <div class="col-sm-12 col-xs-12">                                        
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <a data-toggle="collapse" data-parent="#accordion" href="#RegistrationTable" class="btn btn-info btn-sm">
                                                        <strong>Registration Table </strong><span class="badge">#{newRegistered.count_registration}</span>
                                                    </a>                                                    
                                                </div>
                                                <!-- /.panel-heading -->
                                                <div id="RegistrationTable" class="panel-collapse collapse in">
                                                    <div class="panel-body">
                                                        <div class="table-responsive">
                                                            <table class="table table-striped table-bordered table-hover" id="dataTables-registered">
                                                                <thead>
                                                                    <tr>                                                                    
                                                                        <th><i class="fa fa-bookmark fa-fw"></i>Event Name</th>
                                                                        <th><i class="fa fa-user fa-fw"></i>Username Registered</th>
                                                                        <th><i class="fa fa-clock-o fa-fw"></i>Time Registered</th>                                                                                                                                        
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <c:forEach var="i" items="#{newRegistered.events_registeredTable}">
                                                                        <tr>
                                                                            <td>#{i.eventName}</td>
                                                                            <td>#{i.username}</td>
                                                                            <td>#{i.registered}</td>
                                                                        </tr>
                                                                    </c:forEach>
                                                                </tbody>                                                            
                                                            </table>
                                                        </div>
                                                        <!-- /.table-responsive -->                                                    
                                                    </div>
                                                </div>                                                
                                                <!-- /.panel-body -->
                                            </div>
                                        </div><!--end col 12 - registration-->
                                    </div>
                                </div><!--end row-->
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="col-lg-9 col-sm-8">
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <strong><i class="fa fa-table fa-fw"></i>Events Datatable</strong>
                                                </div>
                                                <!-- /.panel-heading -->
                                                <div class="panel-body">
                                                    <div class="table-responsive">
                                                        <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                                                            <thead>
                                                                <tr>
                                                                    <th><i class="fa fa-key fa-fw"></i></th>
                                                                    <th><i class="fa fa-bookmark fa-fw"></i>Name</th>
                                                                    <th><i class="fa fa-clock-o fa-fw"></i>Start</th>
                                                                    <th><i class="fa fa-clock-o fa-fw"></i>End</th>
                                                                    <th><i class="fa fa-tags fa-fw"></i>Tags</th>                                                                    
                                                                    <th><i class="fa fa-users fa-fw"></i></th>
                                                                    <th><i class="fa fa-edit fa-fw"></i>Action</th>

                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <c:forEach var="i" items="#{showEvent.events_DataTable}">
                                                                    <tr class="odd gradeX">
                                                                        <td>#{i.eventID}</td>
                                                                        <td>
                                                                            <a href="event.xhtml?eventId=#{i.eventID}">#{i.eventName}</a>    
                                                                        </td>
                                                                        <td>#{i.timeStart}</td>
                                                                        <td>#{i.timeEnd}</td>
                                                                        <td class="text-center">#{i.eventType}</td>
                                                                        <td class="text-center">#{i.registered}</td>
                                                                        <td class="text-center">
                                                                            <a class="btn btn-xs btn-link" href="eventpu.xhtml?eventId=#{i.eventID}"><i class="fa fa-edit fa-fw"></i>Edit</a>
                                                                        </td>
                                                                    </tr>                                                                      
                                                                </c:forEach>
                                                            </tbody>                                                            
                                                        </table>
                                                    </div>
                                                    <!-- /.table-responsive -->                                                    
                                                </div>
                                                <!-- /.panel-body -->
                                            </div>
                                            <!-- /.panel -->
                                        </div><!--end col 8 event media-->
                                        <div class="col-lg-3 col-sm-4">
                                            <div class="panel panel-info">
                                                <div class="panel-heading">
                                                    <div class="row">
                                                        <div class="col-xs-12">
                                                            <span class="pull-left"><i class="fa fa-users fa-fw"></i>Total Registered</span>                      
                                                            <div class="pull-right">
                                                                <a href="#registration" data-toggle="collapse" data-parent="#accordion"><i class="pull-right fa fa-plus"></i></a>                                                                
                                                            </div>
                                                        </div>
                                                    </div>                                                                                               
                                                </div>
                                                <!-- /.panel-heading -->
                                                <div id="registration" class="panel-body panel-collapse collapse in">
                                                    <ul class="list-group">
                                                        <c:forEach var="i" items="#{newRegistered.events_total}">
                                                            <li class="list-group-item list-group-item-success">
                                                                <a href="#profile.xhtml?emId=username">
                                                                    <span>#{i.username}
                                                                    <p class="badge pull-right">#{i.total}</p>
                                                                    </span>
                                                                </a>
                                                            </li>  
                                                        </c:forEach>
                                                    </ul>
                                                    <!-- /.list-group -->                                                
                                                </div>
                                                <!-- /.panel-body -->
                                                <a href="#" style="color: #000;">
                                                    <div class="panel-footer">
                                                        <span class="pull-left">View Details</span>
                                                        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                                        <div class="clearfix"></div>
                                                    </div>
                                                </a><!-- /.panel-footer -->
                                            </div>
                                            <!-- /.panel -->
                                        </div><!--end col 4 registration panel-->
                                    </div><!--end col 12-->
                                </div><!--end row-->
                                <div class="row">
                                    <div class="container-fluid">
                                        <div class="col-sm-5">
                                            <div class="panel-group">
                                                <div class="panel panel-default">
                                                    <div class="panel-heading">                                                        
                                                        <a data-toggle="collapse" data-parent="#accordion" href="#gametype" class="btn btn-block btn-warning">
                                                            Game type
                                                        </a>
                                                    </div>
                                                    <div id="gametype" class="panel-collapse collapse in">
                                                        <div class="panel-body">
                                                            write description here....
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="panel panel-default">
                                                    <div class="panel-heading">                                                        
                                                        <a data-toggle="collapse" data-parent="#accordion" href="#talktype" class="btn btn-block btn-info">
                                                            Talk Show type
                                                        </a>
                                                    </div>
                                                    <div id="talktype" class="panel-collapse collapse">
                                                        <div class="panel-body">
                                                            write description here....
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="panel panel-default">
                                                    <div class="panel-heading">
                                                        <a data-toggle="collapse" data-parent="#accordion" href="#meetingtype" class="btn btn-block btn-danger">
                                                            Meeting type
                                                        </a>
                                                    </div>
                                                    <div id="meetingtype" class="panel-collapse collapse">
                                                        <div class="panel-body">
                                                            write description here....
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="panel panel-default">
                                                    <div class="panel-heading">                                                        
                                                        <a data-toggle="collapse" data-parent="#accordion" href="#othertype" class="btn btn-block btn-success">
                                                            Other type
                                                        </a>
                                                    </div>
                                                    <div id="othertype" class="panel-collapse collapse">
                                                        <div class="panel-body">
                                                            write description here....
                                                        </div>
                                                    </div>
                                                </div>
                                            </div><!--end panel group-->
                                        </div> <!--end col sm 5-->
                                        <div class="col-sm-4">                                            
                                            <div class="flot-chart">
                                                <div class="flot-chart-content" id="flot-pie-chart">                                                            
                                                </div>
                                            </div>
                                        </div><!--end pie chart-->
                                        <div class="col-sm-3">
                                            <table class="table table-striped table-bordered table-hover">
                                                <thead>
                                                    <tr>
                                                        <th><i class="fa fa-table"></i></th>
                                                        <th>Event Type</th>
                                                        <th>Total</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <c:forEach var="i" items="#{showEvent.totalEventType}" varStatus="j">
                                                        <tr>
                                                            <td>#{j.index}</td>
                                                            <td>#{i.eventType}</td>
                                                            <td>#{i.total}</td>                                                        
                                                        </tr>
                                                    </c:forEach>  
                                                </tbody>
                                            </table>                                            
                                        </div><!--end col sm 4-->

                                    </div><!--end container-fluid-->
                                </div><!--end row-->
                            </div><!--End tab-pane--> 

                            <div class="tab-pane fade" id="profile-pills">
                                <div class="row">
                                    <div class="container-fluid">
                                        <h1>Content Comment</h1>
                                        <hr/>
                                        <c:forEach var="i" items="#{commentManager.readEventComments}">
                                            #{i.eventId}<br/>
                                            #{i.eventName}<br/>
                                            #{i.usercomment}<br/>
                                            #{i.contentcomment}<br/>
                                            #{i.commented}<br/>
                                            <p>=======================</p>
                                        </c:forEach>

                                    </div>
                                </div>
                            </div> <!--End tab-pane-->                        
                            <div class="tab-pane fade" id="settings-pills">
                                <div class="col-lg-8 col-sm-8">
                                    <div class="col-lg-6 col-sm-6">
                                        <div class="bs-example">

                                        </div>
                                        <div class="highlight">
                                            write something here
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-sm-6">
                                        <div class="row">
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <strong><i class="fa fa-clock-o fa-fw"></i> Timeline</strong>
                                                </div>
                                                <div class="panel-body">

                                                </div>
                                            </div>
                                        </div>
                                    </div> 
                                </div> 
                                <div class="col-lg-4 col-sm-4"></div>
                            </div><!--End tab-pane-->
                        </div>

                    </div>
                </h:form>
            </ui:define>
        </ui:composition> 
        <!--javascript for flot charts-->
        <script src="js/plugins/flot/jquery.flot.js" type="text/javascript"></script>
        <script src="js/plugins/flot/jquery.flot.pie.js" type="text/javascript"></script>
        <script src="js/plugins/flot/jquery.flot.tooltip.min.js" type="text/javascript"></script>
        <!-- DataTables JavaScript -->        
        <script src="js/plugins/dataTables/dataTables.bootstrap.js" type="text/javascript"></script>
        <script src="js/plugins/dataTables/jquery.dataTables.js" type="text/javascript"></script>        
        <script type="text/javascript">
            // events table
            $(document).ready(function() {
                $('#dataTables-example').dataTable();
                $('#dataTables-registered').dataTable();
            });
            //Flot Pie Chart
            $(function() {
                
                var data = [{
                        label: "Game",
                        data: 10
                    }, {
                        label: "Talk Show",
                        data: 10
                    }, {
                        label: "Meeting",
                        data: 10
                    }, {
                        label: "Other",
                        data: 20
                    }];
                var option = {
                    series: {
                        pie: {
                            show: true
                        }
                    },
                    grid: {
                        hoverable: true
                    },
                    tooltip: true,
                    tooltipOpts: {
                        content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
                        shifts: {
                            x: 20,
                            y: 0
                        },
                        defaultTheme: false
                    }
                };
                var plotObj = $.plot($("#flot-pie-chart"), data, option);

            });


        </script>
    </body>
</html>
